import { Message, Select } from '@arco-design/web-react';
import { useEffect, useState } from 'react';
import DetailItem from './detailItem';
import DetailModal from './detailModal';
import LoadingMask from './loadingMask';
import { apiCardDetailWalletRefundApplyEditTag, apiGetUrgentInfo } from '../api';
import { CardDetailWalletRefundApply } from '../types';
import { dictDataOptions, getDict } from '../utils/utils';
interface Props {
  record: CardDetailWalletRefundApply;
  onCancel: (v?: boolean) => void;
}

const CARD_DETAIL_WALLET_INVOICE_APPLY_TAG_REASON = 'pushback_reason';
export default function UrgeRefundDialog({ record, onCancel }: Props) {
  const [dictDatas, setDictDatas] = useState<Record<string, any>>({});
  useEffect(() => {
        async function fetchDictData() {
            const data = await getDict(CARD_DETAIL_WALLET_INVOICE_APPLY_TAG_REASON);
            setDictDatas(data);
        }

        fetchDictData();
    }, []);

    const [tagReason, settagReason] = useState<string>(record?.tagReason ?? '');

  // 加急
  async function handleUrgeRefund() {
    LoadingMask.show('正在加急...');
    try {
      let res = await apiCardDetailWalletRefundApplyEditTag({
        id: record.pushbackId,
        pushback: "Y",
        lastPushbackReason: tagReason
      });
      let data = res.data;
      if (data.code === 200) {
        Message.success(data.msg ?? '加急成功');
      } else {
        Message.warning(data.msg ?? '加急失败');
      }
      onCancel(data.code === 200);
    } catch (e: any) {
      Message.error(e.message ?? '加急失败');
    } finally {
      LoadingMask.hide();
    }
  }

  return (
    <DetailModal
      show
      title={`提示（今日${record.isTag === 'Y' ? '已' : '未'}加急）`}
      onConfirm={handleUrgeRefund}
      onCancel={onCancel}
      className="bw-80"
    >
      <div className='bw-100'>
        <div className="mb-10">
          {
            record.pushbackNum ? <div className="mb-10 ml-20 font-widget-600">
              今日已加急，无需再次加急，如果加急原因不一致， 可在 下方变更加急原因
            </div> : <div v-else className="mb-10 ml-20 font-widget-600">
              今日未加急，点击提交后，今日将加急一次
            </div>
          }
          <DetailItem label="加急原因" labelSpan={6} outlet={2}>
            <Select
              className="m-select"
              showSearch
              allowClear
              filterOption={(inputValue, option) =>
                option.props.value.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0 ||
                option.props.children.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
              }
              options={dictDataOptions(dictDatas[CARD_DETAIL_WALLET_INVOICE_APPLY_TAG_REASON])}
              value={tagReason}
              onChange={(v) => settagReason(v)}
            />
          </DetailItem>


        </div>

      </div>
    </DetailModal>
  );
}
